<template>
  <div class="student-body box_bg">
    <h2 class="box_tit">
      <i class="icon icon1"></i>职业发展服务计划管理
      <i class="reti"></i>
    </h2>
    <div class="components_con">
      <!-- 查询开始 -->
      <div class="components_searchs" @keyup.enter="onSubmit">
        <span class="tit">院校：</span>
        <el-select v-model="careerDataGrid.queryParams.schoolId" clearable filterable placeholder="院校">
          <el-option v-for="school in schoolSelectData" :key="school.id" :label="school.text" :value="school.id"></el-option>
        </el-select>

        <span class="tit">二级院校：</span>
        <el-select v-model="careerDataGrid.queryParams.secondSchoolId" clearable placeholder="二级院校">
          <el-option v-for="secondSchool in secondSchoolData" :key="secondSchool.id" :label="secondSchool.text" :value="secondSchool.id"></el-option>
        </el-select>

        <span class="tit">专业：</span>
        <el-select v-model="careerDataGrid.queryParams.professionId" clearable placeholder="专业">
          <el-option v-for="profession in professionSelectData" :key="profession.id" :label="profession.text" :value="profession.id"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- components_btns -->
    <div class="components_btns clearfix">
      <div class="fl">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="toAddCareerPage">添加职业发展服务计划</el-button>
      </div>
    </div>
    <div class="scrollBarX">
      <vue-table
        :api-url="careerDataGrid.apiUrl"
        :fields="careerDataGrid.fields"
        :appendParams="careerDataGrid.queryParams"
        :content="self"
        ref = "careerDataGrid"
      >
      </vue-table>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        self: this,
        schoolSelectData:[],
        secondSchoolData:[],
        professionSelectData:[],
        careerDataGrid: {
          apiUrl: api.careerDevelopment,
          queryParams: {schoolId:null,secondSchoolId:null,professionId:null},
          fields:[{
            prop:"schoolName",
            label:"院校"
          },{
            prop:"secondSchoolName",
            label:"院系"
          },{
            prop:"professionName",
            label:"专业"
          },{
            prop:"grade",
            label:"年级"
          },{
            prop:"semester",
            label:"学期"
          },{
            prop:"statusShow",
            label:"状态"
          },{
            prop: "__action",
            label: "操作",
            actions: [{
              label: "编辑",
              type: "edit",
              func: function(vm, row) {
                vm.toEditCareerPlanView(row.id);
              }
            },{
              label: "详情",
              type: "edit",
              func: function(vm, row) {
                vm.showCareerView(row.id);
              }
            },
              {
                label: "删除",
                type: "delete",
                func: function(vm, row) {
                 vm.removeCareer(row.id);
                }
              },
            ]
          }]
        }
      }
    },
    created(){
      let self = this;
      self.axios({//获得院校
        method:"get",
        url:api.getSchoolList
      }).then(function(response){
        self.schoolSelectData = response.data.data
      });
      self.axios({//获得二级院校
        method:"get",
        url:api.getSecondSchoolList
      }).then(function(response){
        self.secondSchoolData = response.data.data;
      });

      self.axios({//获得专业
        method:"get",
        url:api.getProfeesionList
      }).then(function(response){
        self.professionSelectData = response.data.data
      });
    },
    methods:{
      removeCareer:function(id){
        let self = this;
        self.$confirm('是否删除该条记录！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.axios({
            method:'DELETE',
            url:api.removeCareerDevelopmentById+id
          }).then(function(response){
            let flag = response.data.success;
            if(flag){
              self.$message({
                message: response.data.msg,
                type: 'success',
              });
              self.$refs.careerDataGrid.$emit('vuetable:current-refresh');
            }else{
              self.$refs.careerDataGrid.$emit('vuetable:current-refresh');
            }
          });
        },()=>{});
      },
      showCareerView:function(id){
        let self = this;
        self.$router.push({
          path:'/jz/career/plan/view/'+id
        })
      },
      toAddCareerPage:function(){
        let self = this;
        self.$router.push({
          path:'/jz/career/plan/save'
        })
      },
      toEditCareerPlanView:function(id){
        let self = this;
        self.$router.push({
          path:'/jz/career/plan/edit/'+id
        })
      },
      onSubmit:function(){
        this.$refs.careerDataGrid.$emit('vuetable:refresh');
      },
      reset:function(){
        this.careerDataGrid.queryParams.schoolId = null;
        this.careerDataGrid.queryParams.secondSchoolId = null;
        this.careerDataGrid.queryParams.professionId = null;
        this.$refs.careerDataGrid.$emit('vuetable:refresh');
      }
    }
  }
</script>
<style scoped>
  .student-body {
    min-height: 545px;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 15px;
  }
  .student-body .contents span {
    display: inline-block;
    width: 100px;
    margin-top: 10px;
    text-align: right;
  }
  .student-body .contents .spanInput {
    height: 26px;
    width: 206px;
    line-height: 26px;
    font-size: 12px;
    color: #cdcdcd;
    text-indent: 5px;
    border-radius: 15px;
    border: 1px solid #cdcdcd;
    box-sizing: border-box;
    outline: none;
  }

  .student-body .contents .sexSpan {
    width: 20px;
    padding-left: 20px;
  }
  .student-body .contents .sexSpans{
    width: 50px;
  }
  .student-body .contents .lableInput {
    position: absolute;
    top: 12px;
    left: 105px;
  }
  .student-body .contents
  .student-body .reti {
    width: 94px;
  }
  .student-body .inputs {
    width: 100%;
    height: 40px;
    padding-top: 20px;
  }
  .student-body .inputs > span {
    font-size: 12px;
    color: #333;
    padding-left: 1px;
  }

  .box_tit {
    border-bottom: 1px solid #e6e8ec;
    position: relative;
    padding: 4px 0 10px 30px;
    margin-top: 0;
    font-weight: bold;
    line-height: 16px;
  }
  .student-body input[type=text], .student-body input[type=password],.student-body select{
    width: 100%;
  }
</style>
